import React from 'react';

import { Modal, Button } from 'antd';
// event
import emitter from '../../util/events';
// Component
import TranslateModal from '../TranslateModal';
import CategoryModal from '../CategoryModal';
import AttributeModal from '../AttributeModal';
import SelectPictrue from '../SelectPictrueModal';

export default class ModalInit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
        };
        this.handleOk = this.handleOk.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.content = null;
        this.width = null;
    }

    componentDidMount() {
        // data事件通讯
        this.eventEmitter = emitter.addListener('showModal', (data) => {
            this.setState({
                visible: true,
            });
            switch(data.type) {
                case 'Translate':
                    this.Title = '翻译';
                    this.content = <TranslateModal staus={data.data}></TranslateModal>;
                    this.width = 520;
                    break;
                case 'ChooseClass': 
                    this.Title = '选择分类';
                    this.content = <CategoryModal staus={data.data}></CategoryModal>;
                    this.width = 900;
                    break;
                case 'Attribute':
                    this.Title = '添加自定义产品属性';
                    this.width = 520;
                    this.content = <AttributeModal staus={data.data}></AttributeModal>;
                    break;
                case 'selectPictrue':
                    this.Title = '选择图片';
                    this.width = 900;
                    this.content = <SelectPictrue staus={data.data}></SelectPictrue>;
                    break;
                default:
                    break;
            }
        });
    }

    handleOk(e) {
        emitter.emit('submitModal')
        this.setState({
            loading: true,
        });
        setTimeout(() => {
            this.setState({
              visible: false,
              loading: false,
            });
        }, 1000+Math.random()*(2000-1000));
    }

    handleCancel(e) {
        this.setState({
            visible: false,
        });
    }
    render() {
        const { visible, loading } = this.state;
        return (
            <Modal
                width={this.width}
                visible={visible}
                title={this.Title}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                destroyOnClose={true}
                footer={[
                    <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                        保存
                    </Button>,
                    <Button key="back" onClick={this.handleCancel}>取消</Button>,
                ]}
            >
                {
                    this.content
                }
            </Modal>
        )
    }
}